<template>
<div class="">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>邮件管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 内容区域 -->
    <el-card>
        <el-form :model="queryInfo" ref="queryForm" :rules="queryFormRules" size="small" :inline="true" label-width="90px">
        <!-- <el-form-item label="邮件引擎" prop="emailEngine">
          <el-input v-model="queryInfo.emailEngine" placeholder="请输入邮件引擎" clearable />
        </el-form-item> -->
        <el-form-item label="邮件关键词" prop="emailTheme">
            <el-input v-model="queryInfo.emailTheme" placeholder="请输入邮件关键词" clearable />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery" type="primary" icon="el-icon-search" size="mini">搜索</el-button>
          <el-button @click="resetQuery" icon="el-icon-refresh" size="mini">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 新增按钮 -->
      <el-row :gutter="10" class="mb8" style="marginBottom:20px">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleSendEmail">发送邮箱</el-button>
        </el-col>
        <!-- 红色删除按钮 -->
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelAll">删除</el-button>
        </el-col>
      </el-row>
      <!-- 列表区域 -->
      <el-table :data="userList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="emailEngine" label="邮箱引擎"  align="center"> </el-table-column>
        <el-table-column prop="sendEmail" label="发件人邮箱"  align="center" width="170px"> 
        </el-table-column>
        <el-table-column prop="sendName" label="发件人昵称"  align="center"> </el-table-column>
        <el-table-column prop="receiveName" label="接收人"  align="center" width="170px"> </el-table-column>
        <el-table-column prop="emailTheme" label="邮箱主题"  align="center"> </el-table-column>
        <el-table-column prop="context" label="邮箱内容"  align="center"> 
          <!-- 来一个按钮 按钮打开 抽屉 -->
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="hanldeView(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
          <template  slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete" @click="hanldeDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>         
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 弹出框 发送短信-->
    <el-dialog :title="upload.title" width="800px"  :visible.sync="dialogVisible" @close="addDialogClosed" append-to-body> 
      <!-- 内容主题区域 -->
      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="100px">
        <el-row>
          <el-col :span="18">
            <el-form-item label="发送方式" prop="SendWay">
              <!-- 单选框 纯文本跟HTML -->
              <el-radio-group v-model="SendWay">
                <el-radio label="1">纯文本</el-radio>
                <el-radio label="2">HTML</el-radio>
              </el-radio-group>
          </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="接收人邮箱" prop="receiveNames">
              <el-input  type="textarea" :rows="2" placeholder="请输入接收人邮箱，多个邮箱用,拼接" v-model="addForm.receiveNames"  />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="接收主题" prop="emailTheme">
              <el-input  placeholder="请输入邮件内容" v-model="addForm.emailTheme"  />
            </el-form-item>
          </el-col>
          <!-- SendWay为纯文本展示input 为html展示 富文本 -->
          <el-col :span="24" v-if="SendWay === '1'">
            <el-form-item label="邮件内容" prop="emailText">
              <el-input type="textarea" :rows="4" placeholder="请输入邮件内容" v-model="addForm.emailText" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="SendWay === '2'">
            <el-form-item label="邮件内容" prop="emailText">
              <!-- vue-quill-editor 富文本 -->
              <quill-editor v-model="addForm.emailText" ref="myQuillEditor"  
              >
              </quill-editor>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleOk">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>

export default {
  name: 'emailManagement',
  data () {
    return {
        userList: [],
        total:0,
        queryInfo: {
            // 当前的页数
            currentPage: 1,
            // 当前每页显示多少条数据
            pageSize: 10,
      },
      queryFormRules:{
        
      } ,
      upload: {
            // 弹出层标题（用户导入）
            title: '',
          },
      // 弹出层显示隐藏
      dialogVisible: false,
      addForm: {
    },
    //选中的数据
    rowData: {},
    //选中的id
    ids: [],
    addFormRules: {
        //全部必填
        emailTheme: [
            { required: true, message: '请输入邮件主题', trigger: 'blur' },
        ],
        receiveNames: [
            { required: true, message: '请输入接收人邮箱', trigger: 'blur' },
        ],
        emailText: [
            { required: true, message: '请输入邮件内容', trigger: 'blur' },
        ],
    },
    SendWay: '1',
    }
},
methods: {
    // 搜索按钮操作
    handleQuery() {
      this.queryInfo.currentPage = 1
      this.listFun()
    },
    // 重置按钮操作
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.handleQuery()
    },
    // 监听 pageSize 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.listFun()
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.currentPage = newPage
      this.listFun()
    },
    async listFun(){
        const params = this.queryInfo
        const { data: res } = await this.$http.post('/sys-email/select', params)
        if (res.code === 20000) {
          this.userList = res.data.records
          this.total = parseInt(res.data.total)
        } else {
          this.$message.error(res.msg)
        }
    },
    handleOk (){
      this.$refs['addFormRef'].validate(async valid => {
        if (valid) {
          const params = {...this.addForm,
            //receiveNames 是一个字符串，用,分割成为数组
            receiveNames:this.addForm.receiveNames.split(','),
            emailEngine:'本地邮件',
            sendWay:this.SendWay
          }
          const { data: res } = await this.$http.post('/sys-email/send', params)
          if (res.code === 20000) {
            this.$message.success('发送成功')
            this.dialogVisible = false
            this.listFun()
          } else {
            this.$message.error(res.msg)
          }
        } else {
          return false
        }
      })
    },
    addDialogClosed () {
        this.$refs['addFormRef'].resetFields()
        this.SendWay = '1'
        this.addForm.emailText = ''  
    },
    handleSendEmail(){
        this.upload.title = '发送邮件'
        this.dialogVisible = true
    },
    handleSelectionChange(selection){
        this.ids = []
        selection.forEach(item => {
          this.ids.push(item.id)
        })
    },
    //删除已经选中的选项
    handleDelAll(){
        if (this.ids.length === 0) {
          this.$message.warning('请先选中要删除的数据')
          return
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const url = `/sys-email/delete?Ids=${this.ids.join(',')}`;
          const { data: res } = await this.$http.delete(url)
          if (res.code === 20000) {
            this.$message.success('删除成功')
            this.listFun()
          } else {
            this.$message.error(res.msg)
          }
        }).catch(() => {
          this.$message.info('已取消删除')
        })
        },
      hanldeDel(row){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const url = `/sys-email/delete?Ids=${row.id}`;
          const { data: res } = await this.$http.delete(url)
          if (res.code === 20000) {
            this.$message.success('删除成功')
            this.listFun()
          } else {
            this.$message.error(res.msg)
          }
        }).catch(() => {
          this.$message.info('已取消删除')
        })
      },
      hanldeView(row){
        //可以解析html标签
        const content = row.context;
      // 在html字符串中插入样式，限制图片最大宽度为100%
      const styledContent = content.replace(/<img/g, '<img style="max-width: 100%;"');
        this.$alert(styledContent, '查看邮件内容', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `取消查看`
            });
          }
        });
      }
},
created() {
    this.listFun()
  },
}
</script>

<style scoped lang="less" >
/deep/.ql-editor {
    height: 150px;
  }
  /deep/.ql-container {
    height: 150px;
  }
  /deep/.ql-snow .ql-picker.ql-size .ql-picker-label::before,
  /deep/.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

/deep/.ql-snow .ql-picker.ql-header .ql-picker-label::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

/deep/.ql-snow .ql-picker.ql-font .ql-picker-label::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>